<style lang="less" scoped>
@import "../assets/css/config.less";
.feedback_list {
  float: left;
  display: inline-block;
  margin: 0 auto;
}
.title {
  margin-bottom: 20px;
}
.feedback {
  text-align: left;
  font-size: 18px;
}

.user-pic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  float: left;
  background-color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid #ccc;
}
.user-pic img {
  width: 100%;
}
.user-content {
  width: 86%;
  float: left;
  margin-left: 20px;
  text-align: left;
}
.time {
  color: #cccccc;
  font-size: 12px;
}
.v-modal {
  z-index: 99 !important;
}
.el-dialog__wrapper {
  z-index: 100 !important;
}
.authorrole {
  font-size: 12px;
}
.feedback-type {
  display: inline;
  position: absolute;
  right: 60px;
  font-size: 14px;
}
.header{
  position: fixed;
  top:0;
  width: 100%;
  min-width: 1210px;
  z-index: 999;
}
</style>

<template>
  <div id="index">
    <div class="header">
      <myheader></myheader>
    </div>
    <Layout style="margin-top: 60px" id="content">
      <Layout
        :style="{
          padding: '0px 24px 24px',
          'background-color': 'white',
          'min-width': '1210px',
        }"
      >
        <div style="padding: 15px 30px">
          <my-breadcrumb :prop="breadcrumbList"></my-breadcrumb>
        </div>
        <div class="feedback_list">
          <Card style="width: 1000px; margin-bottom: 20px; overflow: hidden">
            <div class="feedback">
              <h3 class="title">用户反馈</h3>
            </div>
            <div
              v-for="(com, key) in feedbacks"
              style="
                width: 100%;
                display: inline-block;
                border: 1px solid #ccc;
                margin-bottom: 10px;
                padding: 10px;
              "
            >
              <div class="user-pic">
                <img src="@/assets/head.jpg" alt="头像" />
              </div>
              <div class="user-content">
                <h3 class="spacing">
                  {{ com.authorUsername }}
                  <span class="spacing authorrole"
                    >({{
                      com.authorRole === "0"
                        ? "学生"
                        : com.authorRole === "0"
                        ? "学生"
                        : com.authorRole === "1"
                        ? "超管"
                        : com.authorRole === "2"
                        ? "助教"
                        : "老师"
                    }})</span
                  >
                  <div class="feedback-type">{{ com.type }}</div>
                </h3>

                <span class="spacing time">{{
                  formatTime(com.time, "Y年M月D日 h:m:s")
                }}</span>

                <p class="spacing" v-if="com.content">
                  {{ com.content.replace(/<.*?>/gi, "") }}
                </p>
              </div>
            </div>
            <div></div>
          </Card>
          <!--</div>-->
        </div>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import header from "../components/header.vue";
import myBreadcrumb from "../components/myBreadcrumb.vue";
import { getAllFeedback } from "../api/api";
export default {
  name: "feedback",
  data: function () {
    return {
      menu: [],
      point: {},
      feedbacks: [],
      userGroup: "",
      insertIndex: -1,
      typegroup: [],
      breadcrumbList: [
        {
          name: "首页",
          blod: true,
          to: "index",
        },
        {
          name: "用户反馈",
        },
      ],
    };
  },
  mounted() {
    this.userGroup = JSON.parse(this.$store.state.user).userGroup;
    this.point = this.$route.params.point;
    this.userGroup = JSON.parse(this.$store.state.user).userGroup;
    if (this.userGroup == 2 || this.userGroup == 3) {
      this.typegroup = ["题目错误", "出题建议"];
    } else if (this.userGroup == 1) {
      this.typegroup = ["网站优化", "网站bug"];
    }
    getAllFeedback({
      type: this.typegroup,
    })
      .then((response) => {
        if (response.state === true) {
          this.feedbacks = response.results;
        } else {
          this.$Message.error(response.msg);
        }
      })
      .catch((error) => {
        this.$Message.error(error.status);
      });
  },
  components: {
    myheader: header,
    "my-breadcrumb": myBreadcrumb,
  },
  methods: {
    formatNumber(n) {
      n = n.toString();
      return n[1] ? n : "0" + n;
    },
    formatTime(number, format) {
      let time = new Date(number);
      let newArr = [];
      let formatArr = ["Y", "M", "D", "h", "m", "s"];
      newArr.push(time.getFullYear());
      newArr.push(this.formatNumber(time.getMonth() + 1));
      newArr.push(this.formatNumber(time.getDate()));

      newArr.push(this.formatNumber(time.getHours()));
      newArr.push(this.formatNumber(time.getMinutes()));
      newArr.push(this.formatNumber(time.getSeconds()));

      for (let i in newArr) {
        format = format.replace(formatArr[i], newArr[i]);
      }
      return format;
    },
  },
};
</script>